import React from 'react';
import {connect} from 'dva';
import {Row, Col} from 'antd';
import InfoCard from './InfoCard'
import Bar from './Bar'

@connect(state => ({
  loading: state.loading,
  dashboard: state.dashboard,
}))
export default class Index extends React.PureComponent {

  componentDidMount() {
    this.props.dispatch({
      type: 'dashboard/getData',
    });
  }

  render() {
    const {dashboard: {data}} = this.props;
    const {infoCounts = [], rateData} = data;

    const infos = [{
      icon: 'heart-o',
      title: '项目',
      number: infoCounts[0],
      color: 'green',
      sub: 'Get More Space...',
      subIcon: 'info-circle'
    }, {
      icon: 'team',
      title: '会员',
      number: infoCounts[1],
      color: 'pink',
      sub: 'Google Analytics',
      subIcon: 'tag'
    }, {
      icon: 'star-o',
      title: '评分数',
      number: infoCounts[2],
      color: 'blue',
      sub: 'Last 24 Hours',
      subIcon: 'calendar'
    }, {
      icon: 'book',
      title: 'Followers',
      number: 245,
      color: 'yellow',
      sub: 'Just Updated',
      subIcon: 'solution'
    }];

    return (
      <div>
        <Row gutter={24} style={{marginBottom: 24}}>
          <Col span={24}>
            <InfoCard infos={infos}/>
          </Col>
        </Row>
        <Row gutter={24} style={{marginBottom: 24}}>
          <Col span={24}>
            <Bar data={rateData}/>
          </Col>
        </Row>
      </div>
    );
  }
}
